<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div>楼宇名称：<span><el-input v-model="pageParams.name" placeholder="请输入楼宇名称" class="input-1" /><el-button type="primary" class="chaxun" @click="chaXun">查询</el-button> </span></div>
        </div>
        <div>
          <el-button type="primary" @click="building">添加楼宇</el-button>
        </div>
        <el-table :data="list">
          <!-- 放置列 -->
          <el-table-column align="center" width="100" label="序号">
            <template v-slot="{ $index, row }">
              <span>{{ getTableRowIndex(row, $index) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" align="center" width="200" label="楼宇名称" />
          <el-table-column prop="floors" align="center" width="100" label="层数" />
          <el-table-column prop="area" align="center" width="200" label="在管面积(m²)" />
          <el-table-column prop="propertyFeePrice" align="center" width="200" label="物业费(元/m²)" />
          <el-table-column prop="name" align="center" label="状态">
            <template v-slot="{ row }">
              <span v-if="row.status === 0">空置中</span>
              <span v-else-if="row.status === 1">租赁中</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button size="mini" type="text" @click="compile(row)">编辑</el-button>
              <el-button size="mini" type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :total="total"
            :page-size="pageParams.pageSize"
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 30, 40]"
            layout="total,  prev,  pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="currentChange"
          />
        </div>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <el-dialog width="600px" :title="title" :visible.sync="showDialog">
      <!-- 表单内容 -->
      <el-form ref="formDate" label-width="100px" :label-position="labelPosition" :rules="rules" :model="formDate">
        <el-form-item class="el-form-a" label="楼宇名称" prop="name">
          <el-input v-model="formDate.name" style="width:400px" placeholder="请输入楼宇名称" />
        </el-form-item>
        <el-form-item class="el-form-a" label="楼宇层数" prop="floors">
          <el-input v-model="formDate.floors" style="width:400px" placeholder="请输入楼宇层数" />
        </el-form-item>
        <el-form-item class="el-form-a" label="在管面积" prop="area">
          <el-input v-model="formDate.area" style="width:400px" placeholder="请输入在管面积">
            <template slot="append">m²</template>
          </el-input>
        </el-form-item>
        <el-form-item class="el-form-a" label="物业费" prop="propertyFeePrice">
          <el-input v-model="formDate.propertyFeePrice" style="width:400px" placeholder="请输入物业费">
            <template slot="append">元/m²</template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-row type="flex">
            <el-col class="el-row-right">
              <el-button type="primary" size="mini" @click="sbumit">确定</el-button>
              <el-button size="mini">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 警告弹窗 -->
  </div>
</template>
<script>
import { getBuilding, postBuilding, putBuilding, deleteBuilding } from '@/api/building/building'
export default {
  name: 'Building',

  data() {
    return {
      list: [],
      formDate: {
        id: '',
        name: '', // 楼宇名称
        floors: '', // 层数
        area: '', // 再管面积
        propertyFeePrice: '', // 物业单价
        status: 1, // 状态0空置中 1租赁中
        demoFlag: 0 // 是否是演示数据 1是 0 不是 ，演示数据不可以删除和编辑
      },
      rules: {
        name: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }],
        floors: [{ required: true, message: '请输入楼宇层数', trigger: 'blur' }],
        area: [{ required: true, message: '请输入在管面积', trigger: 'blur' }],
        propertyFeePrice: [{ required: true, message: '请输入物业费', trigger: 'blur' }]
      },
      pageParams: {
        name: '', // 模糊搜素
        page: 1,
        pageSize: 10
      },
      total: 0,
      showDialog: false,
      labelPosition: 'top',
      title: '添加楼宇',
      outerVisible: false

    }
  },
  computed: {
    paginatedList() {
      const startIndex = (this.pageParams.page - 1) * this.pageParams.pageSize
      const endIndex = startIndex + this.pageParams.pageSize
      const clonedList = JSON.parse(JSON.stringify(this.list)) // 克隆数据集合
      return clonedList.slice(startIndex, endIndex)
    }
  },
  created() {
    this.getBuilding()
  },
  methods: {
    // 渲染页面
    async getBuilding() {
      const result = await getBuilding({ page: this.pageParams.page, pageSize: this.pageParams.pageSize })
      this.list = result.data.rows
      this.total = result.data.total
    },
    // 设置当前页
    currentChange(page) {
      this.pageParams.page = page
      this.getBuilding()
    },
    // 设置一页显示多少条
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.getBuilding()
    },
    // 模糊搜索
    async chaXun() {
      const result = await getBuilding({
        name: this.pageParams.name // 使用输入的楼宇名称作为模糊搜索关键字
      })
      this.list = result.data.rows // 更新数据
    },
    // 显示弹框
    building() {
      this.showDialog = true
    },
    // 添加或编辑
    async sbumit() {
      if (this.title === '添加楼宇') {
        await postBuilding({
          name: this.formDate.name,
          floors: this.formDate.floors,
          area: this.formDate.area,
          propertyFeePrice: this.formDate.propertyFeePrice
        })
      } else if (this.title === '编辑楼宇') {
        delete this.formDate.status
        delete this.formDate.demoFlag
        await putBuilding(this.formDate)
      }

      // 弹出提示
      this.$message.success('操作成功')
      // 关闭弹窗
      this.showDialog = false
      // 清空表单
      this.$refs.formDate.resetFields()
      // 刷新页面
      this.getBuilding()
    },
    // 编辑
    async compile(row) {
      // 关闭弹窗
      this.showDialog = true
      this.title = '编辑楼宇'
      // 回填表单
      this.formDate.id = row.id
      this.formDate.name = row.name
      this.formDate.floors = row.floors
      this.formDate.area = row.area
      this.formDate.propertyFeePrice = row.propertyFeePrice
    },
    // 删除
    async del(id) {
      // this.outerVisible = true
      await deleteBuilding(id)
      // 弹出提示
      this.$message.success('删除成功')
      // 刷新数据
      this.getBuilding()
    },
    getTableRowIndex(row, index) {
      const startIndex = (this.pageParams.page - 1) * this.pageParams.pageSize
      return startIndex + index + 1
    }

  }
}
</script>
<style scoped>
.input-1{
  width: 200px;
}
.chaxun{
margin-left: 20px;

}
.biaoge{
margin-left: 20px;
}
.yanse{
  background-color: #f4f6f8;
  display: flex;

}
.yanse1{
   display: flex;
}
.box{
  display: block;
  margin: 10px 45px;
}
.block{
float: right;
margin-top: 20px;
}
.el-form-a{
  margin-left: 80px;
}
.el-row-right{
  margin-top: 50px;
  margin-left:400px;
}

</style>

